<template>
    <view class="container-set">
        <!-- #ifdef MP-TOUTIAO  -->
		<navTopTT :title="`我的${moneyName}`" :showBack="true"></navTopTT>
		<!-- #endif -->
		<!-- #ifdef MP-KUAISHOU  -->
		<navTop :title="`我的${moneyName}`" :showBack="true"></navTop>
		<!-- #endif -->
        
        <!-- #ifdef MP-KUAISHOU -->
        <view class="top-view">
            <view class="flex justify-between">
                <text class="text-black text-lg">我的{{ moneyName }}</text>
                <text class="xl text-gray cuIcon-attention" @tap="hideStatus = !hideStatus"></text>
            </view>
            <view v-if="hideStatus" class="text-box margin-top-sm">*****</view>
            <view v-else class="text-box margin-top-sm">{{ balance | fruitNum10 }}</view>
        </view>

        <view class="line-box-all">
            <view class="line-box flex justify-between align-center" @tap="handleJump('money')">
                <view class="flex align-center">
                    <image src="https://res.qiguoread.com/staticResources/fellow_townsman/image/uni/pay_icon2.png" class="margin-right-sm img-box2"></image>
                    充值记录
                </view>
                <text class="lg text-gray cuIcon-right"></text>
            </view>
            <view class="line-box flex justify-between align-center" @tap="handleJump('history')">
                <view class="flex align-center">
                    <image src="https://res.qiguoread.com/staticResources/fellow_townsman/image/uni/pay_icon1.png" class="margin-right-sm img-box2"></image>
                    消费记录
                </view>
                <text class="lg text-gray cuIcon-right"></text>
            </view>
        </view>
        <!-- #endif -->
        <!-- #ifdef MP-TOUTIAO -->
        <view class="top-view">
            <view class="flex justify-between">
                <text class="text-black text-lg">我的{{ moneyName }}</text>
                <text class="xl text-gray cuIcon-attention" @tap="hideStatus = !hideStatus"></text>
            </view>
            <view v-if="hideStatus" class="text-box margin-top-sm color-set-blue">*****</view>
            <!-- <view v-else class="text-box margin-top-sm color-set-blue">{{ balance | fruitNum10 }}</view> -->
            <view v-else class="text-box margin-top-sm color-set-blue">{{ balance }}</view>
        </view>

        <view class="line-box-all">
            <view class="line-box flex justify-between align-center" @tap="handleJump('money')">
                <view class="flex align-center">
                    <image src="https://res.qiguoread.com/staticResources/fellow_townsman/image/uni/toutiao/money_set2.png" class="margin-right-sm img-box2"></image>
                    充值记录
                </view>
                <text class="lg text-gray cuIcon-right"></text>
            </view>
            <view class="line-box flex justify-between align-center" @tap="handleJump('history')">
                <view class="flex align-center">
                    <image src="https://res.qiguoread.com/staticResources/fellow_townsman/image/uni/toutiao/money_set1.png" class="margin-right-sm img-box2"></image>
                    消费记录
                </view>
                <text class="lg text-gray cuIcon-right"></text>
            </view>
        </view>
        <!-- #endif -->
    </view>
</template>
<script>
export default {
    name: 'PayPage',
    data() {
        return {
            hideStatus: false,
            balance: 0,
            moneyName:this.moneyName
        }
    },
    onLoad() {
        this.getBalance()
    },
    methods: {
        getBalance() {
			this.zwyRequest({
				header: {
					'content-type': 'application/json;charset=UTF-8'
				},
				url: '/wealth/api/balance/user_balance'
			}).then(res => {
                if(typeof(res) === 'number' || typeof(res) === 'string') {
                    this.balance = res || 0
                } else {
                    this.balance = 0
                }
				
			});
		},
        handleJump(type) {
            uni.navigateTo({
                url: `../pay_history/pay_history?type=${type}`
            })
        }
    }
}
</script>
<style lang="scss" scoped>
.container-set {
    background: #FFFFFF;
    overflow: hidden;
}
.top-view {
    width: 670rpx;
    margin: 48rpx auto;
    background: #FFFFFF;
    box-shadow: 0px 2px 18px 0px rgba(0,0,0,0.16);
    border-radius: 24rpx;
    padding: 34rpx;
    box-sizing: border-box;
    .text-box {
        color: #FF6FA2;
        font-size: 60rpx;
        font-family: DINAlternate-Bold, DINAlternate;
        font-weight: bold;
        line-height: 70rpx;
    }
}

.line-box-all {
	padding-left: 24rpx;
    .line-box {
        height: 120rpx;
        width: 100%;
        font-size: 32rpx;
        color: #333333;
        border-bottom: 1rpx solid #eeeeee;
        padding: 0 32rpx;
        .img-box2 {
            width: 40rpx;
            height: 39rpx;
        }
    }
}

.color-set-blue {
    color: #017AFF !important;
}
</style>